<template>
  <div class="wrap">
    <template>
      <fill-header :step="1"/>
    </template>
    <div class="fill-wrap">
      <div class="fill-main flex flex-justify-around">
        <div class="fill-left">
          <div class="fill-content">
            <div class="title">
              <h2 class="blue">{{ $t('fillHeader.jonInfo') }}</h2>
              <p>{{ $t('job.tips') }}</p>
            </div>
            <div class="border-bottom"/>
            <div class="progress">
              <div class="bar">
                <el-progress 
                  :percentage="25" 
                  :show-text="false" 
                  color="#8e71c7"/>
              </div>
              <span>25%</span>
            </div>
            <div class="contact">
              <div class="form">
                <el-form 
                  ref="form" 
                  :model="jobInfo" 
                  :rules="rules" 
                  :show-message="false" 
                  label-position="top"> 
                  <el-form-item 
                    :label="$t('job.industry')" 
                    prop="industry">
                    <el-select v-model="jobInfo.industry">
                      <el-option
                        v-for="item in industryList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label"/>
                    </el-select>
                  </el-form-item>
                  <el-form-item 
                    :label="$t('job.company')" 
                    prop="company">
                    <el-input 
                      v-model="jobInfo.company" 
                      :maxlength="100" 
                      :placeholder="$t('job.company_ph')" 
                      type="text"/>
                  </el-form-item>
                  <el-form-item 
                    :label="$t('job.tel')" 
                    prop="companyPhone">
                    <el-input 
                      v-model="jobInfo.companyPhone" 
                      :minlength="9" 
                      :maxlength="15" 
                      :placeholder="$t('job.tel_ph')" 
                      type="tel"/>
                  </el-form-item>
                  <el-form-item 
                    :label="$t('job.inDate')" 
                    prop="entryTime">
                    <el-date-picker
                      v-model="jobInfo.entryTime"
                      :picker-options="pickerBeforeToday"
                      type="date"
                      value-format="yyyy-MM-dd"/>
                  </el-form-item>
                  <el-form-item 
                    :label="$t('job.income')" 
                    prop="monthIncome">
                    <el-input 
                      v-model="jobInfo.monthIncome" 
                      :placeholder="$t('job.income_ph')" 
                      type="number" 
                      @input="noneZero"/>
                  </el-form-item>
                  <el-form-item 
                    :label="$t('job.province')" 
                    prop="companyProvinceId">
                    <el-select 
                      v-model="jobInfo.companyProvinceId" 
                      @change="fetchChild(jobInfo.companyProvinceId || 0, 'county')">
                      <el-option
                        v-for="item in provinceList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                  </el-form-item>
                  <el-form-item 
                    :label="$t('job.county')" 
                    prop="companyCityId">
                    <el-select 
                      v-model="jobInfo.companyCityId" 
                      @change="fetchChild(jobInfo.companyCityId || 0, 'street')">
                      <el-option
                        v-for="item in countyList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                  </el-form-item>
                  <el-form-item 
                    :label="$t('job.street')" 
                    prop="companyRegionId">
                    <el-select v-model="jobInfo.companyRegionId">
                      <el-option
                        v-for="item in streetList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                  </el-form-item>
                  <el-form-item 
                    :label="$t('job.detailed')" 
                    prop="companyAddress">
                    <el-input 
                      v-model="jobInfo.companyAddress" 
                      :maxlength="200" 
                      type="text"/>
                  </el-form-item>
                  <div class="title blue font-20 bold border-bottom">{{ $t('fillHeader.contactInfo')+1 }}</div>
                  <el-form-item :label="$t('contact.relationship')">
                    <el-select 
                      v-model="jobInfo.contactOneRelation" 
                      prop="contactOneRelation">
                      <el-option
                        v-for="item in relationOneList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                  </el-form-item>
                  <el-form-item 
                    :label="$t('contact.name')" 
                    prop="contactOneName">
                    <el-input 
                      v-model="jobInfo.contactOneName" 
                      :maxlength="50" 
                      :placeholder="$t('contact.name_ph')" 
                      type="text"/>
                  </el-form-item>
                  <el-form-item 
                    :label="$t('contact.phone')" 
                    prop="contactOnePhone">
                    <el-input 
                      v-model="jobInfo.contactOnePhone" 
                      :maxlength="15" 
                      :placeholder="$t('contact.phone_ph')" 
                      type="tel"/>
                  </el-form-item>
                </el-form>
                <div class="title"/>
                <div class="title"/>
                <div class="full-width flex flex-justify-center padding">
                  <el-button 
                    :disabled="!nextEnabled" 
                    type="primary" 
                    round 
                    @click="save">{{ $t('login.goOn') }}</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="fill-right">
          <fill-right/>
        </div>
      </div>
    </div>
    <template>
      <sjx_Footer/>
    </template>
  </div>
</template>
<script>
import fillHeader from '../../components/fill-header'
import fillRight from '../../components/fill-right'
import sjx_Footer from '../../components/footer'
import ImageFile from '../../common/image-file'
import base from '../../common/fn.js'
export default {
  components: {
    fillHeader,
    sjx_Footer,
    fillRight
  },
  data() {
    return {
      jobInfo: {
        industry: '',
        company: '',
        companyPhone: '',
        entryTime: '',
        monthIncome: '',
        companyProvinceId: '',
        companyCityId: '',
        companyRegionId: '',
        companyAddress: '',
        incomePic: '',
        companyLongitude: 0,
        companyLatitude: 0,
        contactOneRelation: '',
        contactOneName: '',
        contactOnePhone: ''
      },
      industryList: [],
      provinceList: [],
      countyList: [],
      streetList: [],
      imageData: '',
      imgHasError: false,
      rules: {
        contactOneRelation: [{ required: true, trigger: 'change' }],
        contactOneName: [{ required: true, trigger: 'blur' }],
        contactOnePhone: [{ required: true, trigger: 'blur' }],
        industry: [{ required: true, trigger: 'change' }],
        company: [
          { required: true, trigger: 'blur' },
          {
            min: 1,
            max: 100,
            message: this.$t('login.tooLong'),
            trigger: 'change'
          }
        ],
        companyPhone: [
          { required: true, trigger: 'blur' },
          {
            min: 1,
            max: 15,
            message: this.$t('login.tooLong'),
            trigger: 'change'
          }
        ],
        entryTime: [{ required: true, trigger: 'change' }],
        monthIncome: [
          { required: true, trigger: 'blur' },
          {
            min: 1,
            max: 30,
            message: this.$t('login.tooLong'),
            trigger: 'change'
          }
        ],
        companyProvinceId: [{ required: true, trigger: 'change' }],
        companyCityId: [{ required: true, trigger: 'change' }],
        companyRegionId: [{ required: true, trigger: 'change' }],
        companyAddress: [
          { required: true, trigger: 'blur' },
          {
            min: 1,
            max: 200,
            message: this.$t('login.tooLong'),
            trigger: 'change'
          }
        ],
        incomePic: [{ required: true, trigger: 'change' }]
      },
      pickerBeforeToday: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      nextEnabled: true,
      relationOneList: []
    }
  },
  mounted() {
    this.fetchIndustry()
    this.fetchCity()
    this.fetchRelation()
  },
  methods: {
    noneZero() {
      if (this.jobInfo.monthIncome.slice(0, 1) == 0) {
        this.jobInfo.monthIncome = this.jobInfo.monthIncome.slice(1, 30)
      } else {
        this.jobInfo.monthIncome = this.jobInfo.monthIncome.slice(0, 30)
      }
      // if(this.jobInfo.monthIncome.length > 30){
      //   // console.log(this.jobInfo.monthIncome.slice(0, 30))
      //   this.jobInfo.monthIncome = this.jobInfo.monthIncome.slice(0, 30)
      // }
    },
    save() {
      const self = this
      this.$refs['form'].validate(valid => {
        if (valid) {
          let option = {
            header: {
              ...base,
              action: 'U0006VN',
              sessionid: this.$store.state.sessionid
            },
            ...self.jobInfo
          }
          self.$axios.$post('', option).then(res => {
            if (res.header.code == 0 && res.data == 1) {
              let option = {
                header: {
                  ...base,
                  action: 'U0005',
                  sessionid: this.$store.state.sessionid
                },
                ...self.jobInfo
              }
              self.$axios.$post('', option).then(res => {
                if (res.header.code == 0 && res.data == 1) {
                  self.nextEnabled = false
                  this.$router.push('/identity')
                } else {
                  self.$message.error(res.header.msg)
                }
              })
            } else {
              self.$message.error(res.header.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    imgChange() {
      const self = this
      let e = window.event || arguments[0]
      let image = new ImageFile()
      image.compress({ file: e.target.files[0] }).then(res => {
        const imgRes = res
        let option = {
          header: {
            ...base,
            action: 'F0002',
            sessionid: self.$store.state.sessionid
          },
          imageBase64: resURL.split(',')[1],
          imageType: resURL.split(';')[0].split(':')[1]
        }
        this.$axios.$post('', option).then(res => {
          if (res.header.code == 0) {
            self.jobInfo.incomePic = res.data
            self.imageData = imgresURL
          } else {
            self.$message.error(res.header.msg)
          }
        })
      })
    },
    fetchIndustry() {
      let option = {
        header: {
          ...base,
          action: 'DICT0002'
        },
        optionGroup: 'industry'
      }
      this.$axios.$post('', option).then(res => {
        if (res.header.code == 0) {
          let data = res.data
          let arr = []
          data.forEach((item, i) => {
            arr.push({ label: item.optionName, value: item.id })
          })
          this.industryList = arr
        }
      })
    },
    fetchCity() {
      const self = this
      let option = {
        header: {
          ...base,
          action: 'C0012'
        }
      }
      this.$axios.$post('', option).then(res => {
        if (res.header.code == 0) {
          let data = res.data
          let arr = []
          data.forEach((item, i) => {
            arr.push({ label: item.name, value: item.id, pid: item.pid })
          })
          this.provinceList = arr.sort(self.$store.getters.compare)
        }
      })
    },
    fetchChild(pid, desc) {
      const self = this
      let option = {
        header: {
          ...base,
          action: 'C0013'
        },
        pid: pid
      }
      this.$axios.$post('', option).then(res => {
        if (res.header.code == 0) {
          let data = res.data
          let arr = []
          data.forEach((item, i) => {
            arr.push({ label: item.name, value: item.id, pid: item.pid })
          })
          if (desc === 'county') {
            this.countyList = arr.sort(self.$store.getters.compare)
          } else {
            this.streetList = arr.sort(self.$store.getters.compare)
          }
        }
      })
    },
    fetchRelation() {
      let option = {
        header: {
          ...base,
          action: 'DICT0002'
        },
        optionGroup: 'relation'
      }
      this.$axios.$post('', option).then(res => {
        if (res.header.code == 0) {
          let data = res.data
          let arr = []
          data.forEach((item, i) => {
            arr.push({ label: item.optionName, value: item.optionValue })
          })
          this.relationOneList = arr.slice(0, 6)
        }
      })
    }
  }
}
</script>
<style>
.el-progress-bar__inner {
  background-color: #3462ff !important;
}
.el-progress-bar__outer {
  height: 9px !important;
}
.el-form--label-top .el-form-item__label {
  display: inline-block;
  text-align: left;
  padding: 0;
}
.el-select {
  width: 100% !important;
}
.el-button {
  background: #3462ff;
}
.el-button span {
  color: #fff !important;
  font-size: 16px;
}
.el-upload--picture-card,
.el-upload-list__item-actions,
.el-upload-list__item-actions {
  width: 320px !important;
  height: 200px !important;
}
.el-upload--picture-card i {
  line-height: 200px !important;
}
</style>

<style lang="scss" scoped>
.fill-wrap {
  background: #f7f7f7;
  padding: 20px;
  .fill-main {
    width: 1200px;
    margin: 0 auto;
    .fill-left {
      background: #fff;
      width: 800px;
      .fill-content {
        padding: 15px;
        .border-bottom {
          width: 500px;
        }
        .title {
          width: 100%;
          padding: 10px;
          h2 {
            font-size: 29px;
            font-weight: 700;
            line-height: 50px;
          }
          p {
            font-size: 16px;
            line-height: 30px;
            width: 720px;
            margin-bottom: 10px;
          }
        }
        .progress {
          width: 500px;
          position: relative;
          .bar {
            padding-top: 30px;
          }
          span {
            position: absolute;
            left: 20%;
            color: #3462ff;
          }
        }
        .contact {
          padding: 20px;
          .form {
            padding-bottom: 20px;
            width: 500px;
            .add-btn {
              width: 320px;
              display: block;
              text-decoration: none;
              margin: 14px 5px;
              height: 200px;
              .red-border {
                border: dashed 2px red;
              }
              .grey-bg {
                border: dashed 2px #c0c4cc;
                background: rgba(243, 246, 255, 1);
              }
              .add-icon {
                width: 320px;
                height: 200px;
                border-radius: 5px;
                position: relative;
                text-align: center;
                span {
                  line-height: 200px;
                  font-size: 56px;
                  color: #ccc;
                }
                input.updata {
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  opacity: 0;
                  width: 100%;
                  overflow: hidden;
                }
              }
            }
            .el-button {
              width: 140px;
              height: 50px;
              border-radius: 25px;
              box-shadow: 2px 0px 13px rgba(48, 77, 220, 0.45);
            }
          }
        }
      }
    }
    .fill-right {
      background: #fff;
      width: 317px;
      height: 416px;
    }
  }
}
</style>
